<template>
    <div id="editor" style="width: 725px;"></div>
</template>

<script>
    import E from 'wangeditor'
    import envs from '../env.js'
	import systemApi from '../api/system.js'
	import upload from '../utils/upload.js'
	import language from '../utils/language.js'
	
    export default {
        props:{
            detailData:{
                type:String,
                default:''
            }
        },
        data(){
            return{
                envs:envs,
                content:'',
                editor:'',
                editorObj:null,
				
				upload_path:'',
				static_path:''				
            }
        },
        mounted(){
            this.content = this.detailData
            if(!this.editorObj){
                this.wangeditor();
            }
			this.uploadPath()
        },
        methods:{
            wangeditor(){				
                /*Editor编辑器*/
                this.editorObj = new E("#editor");

                this.editorObj.config.uploadFileName = 'file'
                this.editorObj.config.uploadImgParams = {
                    type: 'wangeditor'
                }
                this.editorObj.config.uploadImgHeaders = {
                    token: this.$store.state.token,
                }
                this.editorObj.config.uploadImgServer = this.upload_path
                /*接收图片*/
                this.editorObj.config.onchange = (html) => {
                    this.content = html
                    this.$emit('wChange',html);
                }
				
                let T = this
				
				this.editorObj.config.customUploadImg = function (files, insert) {
					// files 是 input 中选中的文件列表
					// insert 是获取图片 url 后，插入到编辑器的方法
					for(let i=0;i<files.length;i++){
						T.uploadImg(files[i], insert)
					}
				}
				
				
				// 上传视频
				this.editorObj.config.showLinkVideo = false // 隐藏插入网络视频的功能
				this.editorObj.config.customUploadVideo = function (resultFiles, insertVideoFn) {
					// resultFiles 是 input 中选中的文件列表
					// insertVideoFn 是获取视频 url 后，插入到编辑器的方法
					// 上传视频，返回结果，将视频地址插入到编辑器中
					for(let i=0;i<resultFiles.length;i++){
						T.uploadImg(resultFiles[i], insertVideoFn, 'video')
					}
				}
				
      //           /*上传图片*/
      //           this.editorObj.config.uploadImgHooks = {
      //               // 上传图片之前
      //               before: function(xhr) {
						// if (!T.upload_path) {
						// 	message.error('未获取到上传地址')
						// 	return false
						// }
      //                   console.log(xhr);
      //               },
      //               // 图片上传并返回了结果，图片插入已成功
      //               success: function(xhr) {
      //                   console.log('success', xhr)
      //               },
      //               // 图片上传并返回了结果，但图片插入时出错了
      //               fail: function(xhr, editor, resData) {
      //                   console.log('fail', resData)
      //               },
      //               // 上传图片出错，一般为 http 请求的错误
      //               error: function(xhr, editor, resData) {
      //                   console.log('error', xhr, resData)
      //               },
      //               // 上传图片超时
      //               timeout: function(xhr) {
      //                   console.log('timeout')
      //               },
      //               // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      //               // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
      //               customInsert: function(insertImgFn, result) {
      //                   // result 即服务端返回的接口
      //                   console.log('customInsert', result)

      //                   // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
      //                   insertImgFn(result.data.url)
      //               }
      //           }
                this.editorObj.create();
                this.editorObj.txt.html(this.content); // 重新设置编辑器内容
            },
            /*一个方法*/
            destroydd(){
                this.editorObj.destroy()
            },
			
			
			async uploadImg(file, insert, type='img'){
				if(!this.upload_path){
					this.$message.error('未获取到上传地址')
					return false
				}
				if(!this.static_path){
					this.$message.error('未获取到静态资源地址')
					return false
				}
				const hide = this.$message.loading('正在上传，请稍等！', 0);
				upload.uploadFile(this.upload_path, file, this.$store.state.token, 'lc-data', 'img', 'wangeditor').then((res) => {
					setTimeout(hide, 100) // 终止loading状态
					if(res.status == 200 && res.data.data.url && res.data.data.url != ''){
						// 上传代码返回结果之后，将图片/视频插入到编辑器中
						if(type == 'img'){
							this.$emit('updateImg', res.data.data.cover)
						}else if(type == 'video'){
							this.$emit('updateVideo', res.data.data.url)
						}
						insert(res.data.data.url)
					}else{
						this.$message.error(language.imgUploadError);
					}
				})
			},
			
			
			// 获取上传地址
			uploadPath() {
				systemApi.getUploadPath().then(res => {
					if (res.status == 1) {
						if (res.result?.adminUploadPath) {
							this.upload_path = res.result?.adminUploadPath
						}
						if (res.result?.staticPath) {
							this.static_path = res.result?.staticPath
						}
					}
				})
			}
        }
    }
</script>

<style scoped>

</style>
